<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<?php include("facebook_include.php");?>
<?php
    $userName = getUserName();
    $userId = getUserId(); 
    $userFirstName = getUserFirstName();
    $userZipCode = getUserZipCode();
    $friendsUID = getFriendsUIDInApplication();
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Example Tabs</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA9k26g8XMhjW26puIcLupsBQX1RsCDEQZuSyNrxjcE1q90HaczRTbVKsY_d5dAheiTvbhhCBgV4eBGw" type="text/javascript"></script>
	<script src="mapProfile.js" type="text/javascript"></script>
	
	<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
	
	<script src="mapProfile.js" type="text/javascript"></script>
	
	<link rel="stylesheet" type="text/css" href="stylesheets/profile.css" />
	<link rel="stylesheet" type="text/css" href="stylesheets/scrollHorizontal.css" />
	<link rel="stylesheet" type="text/css" href="stylesheets/scrollButtons.css" />
	<link rel="stylesheet" type="text/css" href="stylesheets/accordion.css" />
	<link rel="stylesheet" type="text/css" href="stylesheets/tabs.css" />	
	<link rel="stylesheet" type="text/css" href="stylesheets/basic.css" />
	
	<script type="text/javascript" charset="utf-8">
		//Make sure the page has completely loaded before loading any jS
		jQuery.noConflict();
		var $j = jQuery;

		$j(function(){
			$j("#accordion").accordion({ autoHeight: false });
			//Load horizontal scroll bar inside the accordion
			$j("div.scrollable").scrollable();
				$j(".link").click(function(){

					  $j(".link").css('background', ' url(../images/old_paper.jpg)');

						$j(this).stop().animate({ 
					   backgroundColor: 'white'
					});
				});
				
				$j(".nameOfBuddy a").hover(function(){
					$j(this).removeClass("link");
				},	function(){
						$j(this).addClass("link");
					}		
				);
				
		});
	</script>
	
	<script type="text/javascript" charset="utf-8">
	    function loadDetails(userName, userPic, userId){
	       document.getElementById('detailedUserImage').src =  userPic;
	       document.getElementById('detailedUserName').innerHTML = userName;
	    }
	</script>
    
    <!-- Facebook -->
    <link rel="stylesheet" href="http://static.ak.facebook.com/css/fb_connect.css" type="text/css" />
    <script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
    <script>
        function fb_inviteFriends() {
            FB.Connect.requireSession( 
                    function() { //Connect succes

                        var uid = FB.Facebook.apiClient.get_session().uid;
                        var fbml = fb_getInviteFBML() ;
                        var dialog = new FB.UI.FBMLPopupDialog("Share a Walk invite", fbml) ;
                        dialog.setContentWidth(650);
                        dialog.setContentHeight(450);
                        dialog.show();

                    }
                );
        } 

        function fb_getInviteFBML() {
            var uid = FB.Facebook.apiClient.get_session().uid;
            var fbml = '';
            var friendsInApp ='<?php echo $friendsUID;?>'; 
            fbml = 
            '<fb:fbml>\n' +
                '<fb:request-form\n'+
                                    //Redirect back to this page
                                    ' action="http://apps.facebook.com/shareawalk/profile.php"\n'+
                                    ' method="POST"\n'+
                                    ' invite="true"\n'+
                                    ' type="Share A Walk Invite"\n' +
                                    ' content="Hey!! Come lets go for a walk. This application allows us to find interesting walks in your place. <fb:req-choice url=\'http://apps.facebook.com/shareawalk\' label=\'Accept\'"\n'+ 
                              '>\n'+
                               ' <fb:multi-friend-selector\n'+
                                    ' exclude_ids='+friendsInApp+'\n' +
                                    ' rows="2"\n'+
                                    ' cols="4"\n'+
                                    ' bypass="Cancel"\n'+
                                    ' showborder="false"\n'+
			            ' target="_top"\n'+
                                    ' actiontext="Use this form to invite your friends to Share a Walk"/>\n'+
                        ' </fb:request-form>'+
                ' </fb:fbml>';
            return fbml;
        }
    </script>
    <!-- /Facebook -->

	
</head>

<body>
    <script type="text/javascript" src="wz_tooltip.js"></script>
    <h1>Share a Walk</h1>
	<div class="motivationInfo">
      <div class="badge" id="badge"><img src="images/trophy.png"/></div>	
      <div class="visitsFavourites">
        <b>Hi <?php echo $userFirstName?>!</b><br/>
        You are at Level: 1<br />
        Walks visited: 10 <br />
        Walks favorited: 5 
      </div>
    </div>
	<div id="header">
		<ul id="primary">
			<li><a href="home.php">Walker Home</a></li>
			<li><a href="walks.php">Walks</a></li>
			<li><span>Walker Profile</span></li>
			<li><a href="help.php">Help</a></li>
		</ul>
	</div>
	<div id="main">
		<h4 style="margin-top:-0px;color:#242424;margin-left:10px;">Detailed User/Friend's Profile</h4>
		<div class="inviteMore"><a href="javascript:fb_inviteFriends();">Add New Friends</a></div>
		<div id="contents">
			<div id="leftnav">
			  <!-- Top of Left column has the user information -->
			 
				<div class="profileArea">
				    <?php 
				        $picArray = getUserPic();
				        $user_pic = $picArray["pic_square"];
				        $pic = $picArray["pic"];
				        //echo "Pic".$user_pic.":".$pic;
				        if($user_pic == "")
				            $user_pic = "images/ppl.png";
			            if($pic == "")
				            $pic = "images/ppl.png";
				        $loadBuddies = "loadDetails('" . $userName . "','" . "$pic" . "', '" . $userId . "')";
				    ?>     						
					<div class="myImage"><input type="image" src="<?php echo $user_pic;?>" width="60" height="90" name="myImage" onClick = "<?php echo $loadBuddies;?>;"/></div>
					<div class="myName"><a href="javascript:<?php echo $loadBuddies;?>" class="link"><?php echo $userFirstName; ?></a></div>
					<input type = "hidden" value="<?php echo $userId;?>" />
					<div class="myBadge"><img src="images/trophy.png" width="40px" height="40px"/></div>
				</div>

				<!-- List of buddies of the user -->
				<div class="buddyList">
					<div class="buddySearchArea">
						<form action="" method="get" id="buddySearchForm">
						  <input type="text" class="searchBuddy" name="searchBuddy" value="searchBuddy"/>
						  <div class="searchButton"><input type="image" src="images/search.jpg" width="28" height="29" name="submitButton"  /></div>
						</form>
					</div>
					<?php
					    $friends = getFriendsInApplication();
                    ?>
					<div class="heading">
						<span style="margin-left:5px;">Buddies: </span><span id="numOfBuddies"> <?php echo count($friends); ?> </span>
					</div>
					<div class="listOfBuddies">
							<div class="searchResult">
								<div class="searchContent">
                                    <?php 
                                        if (is_array($friends) && count($friends)) {
                                            foreach ($friends as $friend) {
                                                $frienduid = $friend["uid"]; 
                                                $friendname = $friend["name"];
                                                $pic_square = $friend["pic_square"];
                                                $friend_pic = $friend["pic"];
                                                if($friend_pic == "")
                                                    $friend_pic = "images/ppl.png";
                                                if($pic_square == "")
                                                    $pic_square = "images/ppl.png";
                                                $loadBuddies = "loadDetails('" . $friendname . "','" . "$friend_pic" . "', '" . $frienduid . "')";
                                     ?>                                          
									<div class="listItem" id="listItem">
										<div class="imageOfBuddy"><input type="image" src="<?php echo $pic_square;?>" width="40" height="60" name="nameOfBuddy"  alt="Profile image" onClick = "<?php echo $loadBuddies;?>"/></div>
										<div class="nameOfBuddy"><a href="javascript:<?php echo $loadBuddies;?>" class="link"> <?php echo $friend['first_name'];?> </a></div>
										<input type="hidden" value ="<?php echo $friend['uid'];?>" name="uid"/>
										<div class="badgeOfBuddy"><img src="images/trophy.png" width="30px" height="30px"/></div>
									</div>
									<?php
									        }
								        }
								     ?>
								</div>
							</div>	
					</div>
			</div>
			<!-- End of Left column -->	
			</div>
			<!-- Right column of the profile page -->
			<div id="right-pane">

				<!-- Detailed user info -->
				<div class="userInformation">
					<div class="userInfo">
							<div class="userImage"><input type="image" src="<?php echo $pic;?>" width="100" height="130" name="userImage" id ="detailedUserImage" /></div>
							<div class="userName"><h2 id ="detailedUserName"><?php echo getUserName();?></h2></div>
							<div class="userBadge"><img src="images/trophy.png" width="40px" height="40px"/></div>
							<div class="userDescription"></div>
					</div>
					<!-- Accordion below the profile information for each user -->
					<div id="accordion">

						<h3><a href="#">Walks Visited</a></h3>
						<div class="profileWalks">
							<!-- "previous page" action -->
							<a class="prevPage browse left"></a>
							<!-- root element for scrollable -->
							<div class="scrollable" id="scrollWalksVisited">	
							<!-- root element for the items -->
								<div class="items" id="walksVisited">
								    <!--div class="eachWalk">
										    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
										    <p>Walk one</p>
								    </div-->
								</div>
							</div>
							<!-- "next page" action -->
							<a class="nextPage browse right"></a>
							<br clear="all" />
							</div>

							<h3><a href="#">Favourite Walks</a></h3>
							<div class="profileWalks">
								<!-- "previous page" action -->
								<a class="prevPage browse left"></a>
								<!-- root element for scrollable -->
								<div class="scrollable" id="scrollWalksFavourited">	
								<!-- root element for the items -->
									<div class="items" id="walksFavourited">
									    <!--div class="eachWalk">
											    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
											    <p>Walk one</p>
									    </div-->
								    </div>
								</div>
								<!-- "next page" action -->
								<a class="nextPage browse right"></a>
								<br clear="all" />
							</div>

							<h3><a href="#">Walks Created</a></h3>
							<div class="profileWalks">
								<!-- "previous page" action -->
								<a class="prevPage browse left"></a>
								<!-- root element for scrollable -->
								<div class="scrollable" id="scrollWalksCreated">	
								<!-- root element for the items -->
								    <div class="items"  id="walksCreated">
									    <!--div class="eachWalk">
											    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
											    <p>Walk one</p>
									    </div-->
									</div>
								</div>
								<!-- "next page" action -->
								<a class="nextPage browse right"></a>
								<br clear="all" />
							</div>


						<!-- End of Accordion -->	
						</div>	
					<!-- End of userInformation -->	
					</div>
				<!-- End of right column of the profile page -->	
				</div>
		
		</div>
	</div>
</body>
<!-- Facebook -->
<script type="text/javascript">
        FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("c55d6c8c312ca6c555b1003c8338bbb2", "xd_receiver.htm"); });
</script>
<!-- /Facebook -->
</html>
